<template>
  <div class="BillApplyRecord">
    <div class="input">
      <div style="position: absolute; margin-top: 12.9vh; margin-left: 3.5vw">
        <el-input v-model="input1" placeholder="请输入申请人" type="text" />
      </div>
      <div style="position: absolute; margin-top: 12.9vh; margin-left: 18.5vw">
        <el-input v-model="input2" placeholder="请输入设备名称" type="text" />
      </div>
      <div class="btn" @click="btnClick"></div>
    </div>
    <el-table
      :data="paginatedData"
      :show-header="false"
      :cell-style="{ color: '#fff' }"
      :header-cell-style="{ color: '#fff' }"
      height="56vh"
      style="--el-table-border-color: transparent"
      >>
      <el-table-column align="center">
        <template #default="{ $index }">
          {{ $index + 1 + (currentPage - 1) * pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="AA" label="名称" align="center" />
      <el-table-column prop="BB" label="年龄" align="center" />
      <el-table-column prop="CC" label="邮箱" align="center" />
      <el-table-column prop="DD" label="名称" align="center" />
      <el-table-column prop="EE" label="年龄" align="center" />
      <el-table-column prop="FF" label="邮箱" align="center" />
      <el-table-column prop="GG" label="名称" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="text"
            style="font-size: 0.9vw"
            @click="handleDetails(row)"
            >详情</el-button
          >
          <el-button
            type="text"
            style="color: #f56c6c; font-size: 0.9vw"
            @click="deleteItem(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="data.length"
      layout="total, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
const input1 = ref<string>("");
const input2 = ref<string>("");
import { ElMessage } from "element-plus";
import BillApplyRecordJson from "./json/BillApplyRecord.json"; // 替换为你的JSON文件路径
import ElInput from "../../input.vue"; // 确保路径正确
interface User {
  name: string;
  age: number;
  email: string;
}

const data = ref<User[]>(BillApplyRecordJson);
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return data.value.slice(start, start + pageSize.value);
});
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
};
const handleDetails = (row: User) => {
  console.log(row);
};
// 删除列表项
const deleteItem = (row: User) => {
  data.value = data.value.filter((item) => item !== row);
};

const btnClick = () => {
  ElMessage({
    message: "查询成功",
    type: "success",
    // plain: true,
  });
};
</script>
<style lang="scss" scoped>
.BillApplyRecord {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/image/pjsqjlcx.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .el-table {
    width: 96%;
    position: absolute;
    top: 30.3%;
    left: 2%;
  }
}
.btn {
  cursor: pointer;
  width: 7vw;
  height: 4vh;
  margin-left: 33vw;
  margin-top: 13vh;
  /* background: powderblue; */
  position: absolute;
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  height: 5vh;
}

::v-deep .el-table {
  font-size: 0.9vw !important;
}
::v-deep .el-table .cell {
  height: 3.5vh !important;
  line-height: 3.5vh !important;
}

::v-deep .el-table .el-table__row:not(.el-table__row--striped) td {
  border-bottom: none !important;
}
.el-pagination {
  position: absolute;
  right: 3vw;
  bottom: 3vh;
  ::v-deep .el-input__wrapper {
    background-color: rgb(3, 51, 96) !important;
    color: #fff !important;
    height: 3vh;
    width: 2vw;
    font-size: 0.9vw;
  }
  ::v-deep .el-pagination__editor.el-input {
    width: 3vw;
  }
  ::v-deep .el-pagination__total {
    color: #fff;
    font-size: 0.9vw;
  }
  ::v-deep .el-pagination__goto {
    color: #fff;
    font-size: 0.9vw;
  }
  ::v-deep .btn-prev {
    background-color: rgb(3, 51, 96) !important;
    color: #fff !important;
    height: 3vh;
    width: 2vw;
    font-size: 0.9vw;
  }
  ::v-deep .btn-next {
    background-color: rgb(3, 51, 96) !important;
    color: #fff !important;
    height: 3vh;
    width: 2vw;
    font-size: 0.9vw;
  }
  :deep .el-pager li {
    background-color: rgb(3, 51, 96) !important;
    color: #fff !important;
    height: 3vh;
    width: 2vw;
    font-size: 0.9vw;
  }
}
</style>
